<template>
    <div style="height: 300px; margin-top: 32px; margin-left: 32px; margin-right: 32px; position: relative">
        <div id="chart-container" style="width: 100%; height: 300px"></div>
        <div class="container-title">国际出口宽带</div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import "echarts-gl"
var time1 = null
export default {
    mounted() {
        this.initChart()
    },
    data() {
        return {
            key: 1,
            myChart: null,
            thatData: [105, 135, 145, 190, 260, 389, 410, 500]
        }
    },
    methods: {
        initChart() {
            let that = this
            const chartDom = document.getElementById("chart-container")
            this.myChart = echarts.init(chartDom)
            // 指定图表的配置项和数据
            var option = {
                // title: {
                //     text: "国际出口宽带",
                //     left: "center",
                //     bottom: "-20",
                //     textStyle: {
                //         fontSize: "24",
                //         color: "#00EFFF"
                //     }
                // },
                tooltip: {
                    trigger: "axis"
                },
                xAxis: {
                    data: ["2010", "2012", "2014", "2016", "2018", "2020", "2022", "2024"],
                    type: "category",
                    itemStyle: {
                        borderColor: "blue",
                        color: "#ffffff"
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,

                        textStyle: {
                            show: true,
                            color: "#fff",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        // symbol: ["none", "arrow"],
                        symbolSize: [10, 15],
                        symbolOffset: [0, 0],
                        lineStyle: {
                            width: 2,
                            color: "rgba(255,255,255,0.6)"
                        }
                    }
                },
                yAxis: {
                    // name: "",
                    // nameTextStyle: {
                    //     color: "#fff",
                    //     padding: [0, 0, 6, 0]
                    // },
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,0.2)"
                        }
                    },
                    axisLine: {
                        show: true,
                        // symbol: ["none", "arrow"],
                        symbolSize: [10, 15],
                        symbolOffset: [0, 0],
                        lineStyle: {
                            width: 2,
                            color: "rgba(255,255,255,0.6)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            show: true,
                            color: "#fff",
                            fontSize: "12"
                        }
                    }
                },
                grid: {
                    left: "3%",
                    top: "8%",
                    right: "3%",
                    bottom: "5%",
                    containLabel: true
                },
                series: [
                    {
                        data: this.thatData,
                        name: "",
                        type: "line",
                        symbol: "circle",
                        smooth: true,
                        symbolSize: 0, //不需要点就设置0
                        lineStyle: {
                            width: 2,
                            type: "solid"
                        },
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: "#1AC9FF",
                            color: "#1AC9FF"
                        },
                        areaStyle: {
                            color: "#F4F65B",
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(26,201,255,1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(26,201,255,.1)"
                                        }
                                    ],
                                    false
                                )
                            }
                        }
                    }
                ]
            }
            this.myChart.setOption(option)

            time1 = setTimeout(() => {
                that.updateChart()
            }, 4000)
        },
        updateChart() {
            var data = this.thatData
            let newData = []
            data.map((t) => {
                newData.push(t + 5)
            })
            console.log(newData, "data")
            this.thatData = newData
            this.myChart.resize(false)

            if (time1) {
                clearTimeout(time1)
            }
            time1 = setTimeout(() => {
                this.updateChart()
            }, 4000)
        }
    }
}
</script>

<style scoped>
.container-title {
    position: absolute;
    bottom: -30px;
    left: 0;
    text-align: center;
    font-size: 24px;
    color: #00efff;
    width: 100%;
}
</style>
